<template>
  <div style="padding: 15px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="订单号" prop="code">
              <el-input
                v-model="form.code"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="来源单号">
              <el-input
                v-model="form.sourceCode"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库" prop="warehouseName">
              <el-input
                v-model="form.warehouseName"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商" prop="shipmentName">
              <el-input
                v-model="form.shipmentName"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="单据类型" prop="typeText">
              <el-input
                v-model="form.typeText"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="收货客户" prop="customerName">
              <el-input
                v-model="form.customerName"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="区域">
              <el-input
                v-model="form.area"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple" v-if="form.type !== '4'">
            <el-form-item label="详情地址">
              <el-input
                v-model="form.receiverDetailAddress"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="承运商">
              <el-input
                v-model="form.carrierName"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="运单号">
              <el-input
                v-model="form.waybillCode"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <el-form-item label="备注">
              <el-input
                v-model="form.remarks"
                style="width: 75%"
                :disabled="true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :span-method="objectSpanMethod"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <!-- <vxe-table-column field="receiveCode" title="" width="0" ></vxe-table-column> -->
      <vxe-table-column
        field="goodsName"
        title="商品名称"
        width="270"
      ></vxe-table-column>
      <vxe-table-column
        field="goodCode"
        title="商品编码"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="goodsBarCode"
        title="商品条码"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="goodsUnitName"
        title="单位"
        width="270"
      ></vxe-table-column>
      <vxe-table-column
        field="totalNum"
        title="数量"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="locationName"
        title="分配库位"
        width="270"
      ></vxe-table-column>
      <vxe-table-column
        field="distributionQuantity"
        title="分配数量"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="pickingQuantity"
        title="拣货数量"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="outboundQuantity"
        title="出库数量"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="goodsStatusName"
        title="库存状态"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="vessel"
        title="容器号"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="gmtManufacture"
        title="生产日期"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="gmtExpire"
        title="过期日期"
        width="120"
      ></vxe-table-column>
      <vxe-table-column
        field="batch"
        title="收货批次"
        width="270"
      ></vxe-table-column>
      <vxe-table-column
        field="remarks"
        title="备注"
        width="270"
      ></vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
import VXETablePluginElement from "vxe-table-plugin-element";
import "vxe-table-plugin-element/dist/style.css";
import "@/assets/iconfont/iconfont.css";
import { shipmentDetail } from "@/api/outStorage";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
VXETable.use(VXETablePluginElement);
export default {
  name: "orderDetail",
  props: {
    operationCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      allAlign: "center",
      warehouseData: [],
      units: [],
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0,

      modelEditFlag: false,
      isShow0: false,
      isShow1: false,
      //确定键显示按钮
      form: {
        code: "", //收货单号 ,
        customerCode: "", //客户 ,
        customerName: "",
        supplierName: "",
        gmtPlanArrival: "",
        deliveryItemVOList: [], //计划到货日期 ,
        groupCode: "", //所属机构Code ,
        putawayQuantity: "", //上架数量 ,
        receivedQuantity: "", //收货数量 ,
        remarks: "", //备注 ,
        shipmentCode: "", //入驻商 ,
        shipmentName: "",
        sourceCode: "", //来源单号 ,
        status: "", //状态；0:新增；1：作废；2：待收货；3：部分收货；4：收货完成； ,
        supplierCode: "", //供应商 ,
        totalQuantity: "", //总数量 ,
        typeText: "", //单据类型；0：收货单；1：退货单； ,
        carrierName:"",
        waybillCode:'',
        warehouseCode: "", //仓库
        receiveItemList: [],
      },
      rules: {
        code: [{ required: true, message: "请输入订单号", trigger: "blur" }],
        shipmentName: [
          { required: true, message: "请输入入驻商", trigger: "blur" },
        ],
        typeText: [{ required: true, message: "请输入单据类型", trigger: "blur" }],
        warehouseName: [
          { required: true, message: "请输入仓库", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请输入客户", trigger: "blur" },
        ],
      },
      loading: false,
      tableData: [],
    };
  },
  created() {
    // var code = this.operationCode;
    // shipmentDetail(code).then((response) => {
    //   this.form = response.data;
    //   this.tableData = response.data.deliveryItemWithDistributionVOList;
    //   // deliveryItemWithDistributionVOList
    // });
    let code = this.operationCode ? this.operationCode : "";
      shipmentDetail(code).then(response => {
      this.form = response.data
      this.form.area = this.form.receiverProvince + '，' +this.form.receiverCity + '，' +this.form.receiverDistrict
      console.log("this.form.area",this.form.area);
      this.tableData = this.form.deliveryItemWithDistributionVOList
      this.spanArr = [];
      this.contentSpanArr = [];
      for (var i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
          this.contentSpanArr.push(1);
          this.position = 0;
        } else {
          // 判断当前元素与上一个元素是否相同(第1和第2列)
          if (this.tableData[i].goodCode == this.tableData[i - 1].goodCode &&
            this.tableData[i].goodsName == this.tableData[i - 1].goodsName &&
            this.tableData[i].goodsBarCode == this.tableData[i - 1].goodsBarCode &&
            this.tableData[i].goodsUnitName == this.tableData[i - 1].goodsUnitName &&
            this.tableData[i].totalNum == this.tableData[i - 1].totalNum
          ) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    })
  },
  methods: {
    // 详情

    // 表格合并行
    // :span-method="objectSpanMethod"
    objectSpanMethod({ row, rowIndex, column, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 5
      ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 1) {
            return "合计";
          }
          if (["totalNum"].includes(column.property)) {
            return this.form.totalNum;
          }
          if (
            [
              "distributionQuantity",
              "pickingQuantity",
              "outboundQuantity",
            ].includes(column.property)
          ) {
            return XEUtils.sum(data, column.property).toFixed(6);
          }
          return "-";
        }),
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 150px auto;
  width: 200px;
  // float: right;
}
</style>
<style>
.vxe-table .vxe-body--column:not(.col--ellipsis),
.vxe-table .vxe-footer--column:not(.col--ellipsis),
.vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 6px 0;
}
.vxe-toolbar {
  padding: 0 0 10px 0;
}
</style>
